<template>
  <span class="user-display">
    <span class="username">{{ user.username }}</span>
    <el-tag
      v-if="showAdminBadge && isUserAdmin"
      :type="user.is_superuser ? 'danger' : 'success'"
      size="small"
    >
      管
    </el-tag>
  </span>
</template>

<script setup>
import { computed } from 'vue'
import { isAdmin, getUserAdminType } from '@/utils/userUtils'

// Props
const props = defineProps({
  user: {
    type: Object,
    required: true,
    default: () => ({})
  },
  showAdminBadge: {
    type: Boolean,
    default: true
  }
})

// 计算属性
const isUserAdmin = computed(() => {
  return isAdmin(props.user)
})

const adminBadgeClass = computed(() => {
  const type = getUserAdminType(props.user)
  return {
    'admin-badge--superuser': type === 'superuser',
    'admin-badge--staff': type === 'staff'
  }
})
</script>

<style scoped>
.user-display {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.username {
  color: #303133;
}
</style>
